<template>
  <div>
    <!-- 以下为背景 -->
    <div id="bg_img">
      <!-- 以下开始内容主体 -->
      <div id="input_title">你是产后第</div>
      <div class="input_place">
        <input placeholder-style="color:#e4debf;" class="input_text"  v-model="days" maxlength="2" type="number" placeholder="20">
      </div>
      <div id="tian">
        <span>天</span>
      </div>
      <div class="input_btn">
        <a class="btn_submit" @click="submit">确定</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      days: ''
    }
  },
  methods: {
    submit: function () {
      if (this.days === '') {
        wx.showModal({
          title: '提示',
          content: '请填写1至42之间的整数'
        })
      } else {
        if (this.days > 0 && this.days < 42) {
          wx.navigateTo({
            url: '/pages/detials/main?days=' + parseInt(this.days)
          })
        } else {
          wx.showModal({
            title: '提示',
            content: '请填写1至42之间的整数'
          })
        }
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
#bg_img {
  height: 101.9vh;
  width: 100%;
  background-image: Url('https://i.loli.net/2018/06/18/5b278647de094.gif');
  background-size: contain;
  background-repeat: no-repeat;
  overflow-y: hidden;
}

.input_place {
  height: 200rpx;
  margin-top: 10rpx;
  padding-left: 260rpx;
  padding-right : 260rpx;
  font-size: 190rpx;
  color:#835f25;
}
.input_text {
    height: 100%;
    text-align center;
    color:#835f25;
  }

#input_title {
  text-align: center;
  margin-top: 250rpx;
  color: #87642a;
}

.input_btn {
  text-align: center;
  margin-top: 20rpx;
  color: #ddb147;
  margin-left: 260rpx;
  margin-right : 260rpx;
}

#tian {
  margin-top: 10rpx;
  text-align: center;
  color: #835f25;
}

</style>

